<template>
    <div>
      <div class="content-body">
        <div class="question-header">
          <div class="question-main">
              <div class="question-tags">
                <div class="question-tag" v-for="topicClassification in workInfoExtend.topicClassificationList">
                  <a>{{topicClassification.topicinfo}}</a>
                </div>
              </div>

              <div class="question-title">
                  <span>{{workInfoExtend.workInfo.title}}</span>
              </div>
            <div class="question-body">
              <span v-html="workInfoExtend.workInfo.content"></span>
            </div>
              <div class="question-footer">
                  <div class="question-button-group">
                    <div class="follow">
                      <div v-if="workInfoExtend.isFollow === true">
                        <button class="button-primary" @click="cancleFollowWorkInfo()">已关注</button>
                      </div>
                      <div v-else>
                        <button class="button-primary" @click="followWorkInfo()">关注</button>
                      </div>
                    </div>
                    <div class="writeAnswer" v-show="!workInfoExtend.isMeAnswer">
                      <button class="button-primary" @click="showAnswerModel()">写回答</button>
                    </div>
                    <div class="writeAnswer" v-show="workInfoExtend.isMeAnswer">
                      <button class="button-primary" @click="showAnswerModel()">查看回答</button>
                    </div>
                  </div>
                  <div class="question-button-action">
                      <div class="comment"><button class="button-primary">评论信息</button></div>
                      <div class="report"><button class="button-primary">举报</button></div>
                  </div>
              </div>
          </div>

          <div class="question-side">
                <div class="follow-user">
                    <span>关注者</span>
                    <div class="follow-user-num">
                      <span>{{workInfoExtend.followUser}}</span>
                    </div>
                </div>
                <div class="follow-user-look">
                  <span>被浏览</span>
                  <div class="follow-user-look-num">
                    <span>{{workInfoExtend.workInfo.browsenum}}</span>
                  </div>
                </div>
          </div>
        </div>
      </div>
      <div class="content-body-answer">
        <div class="content-body-answer-items">

          <div class="edit-answer-swap">
           <div class="user-info">
             <span></span>
           </div>
            <div class="editStyle" v-show="meAnswerInfo.answerModel">
              <div class="user-name">
                <span class="user-name">{{meAnswerInfo.userName}}</span>
              </div>
              <Editor v-bind:meAnswerContent="meAnswerInfo.meAnswerContent" v-on:changeInputValue="changeEditorInputValue"/>
              <div class="edit-button-group">
                <div class="edit-button-group-left"></div>
                <button class="button-primary" @click="submitAnswer()">提交回答</button>
              </div>
            </div>
          </div>


          <div class="content-body-answer-item" v-for="workInfoComment in workInfoCommentInfo.workInfoCommentInfoList">
            <div class="user-info">
              <span class="user-name">{{workInfoComment.user.userName}}</span>
              <div class="user-great-num">
                <span > {{workInfoComment.giveUpNum}}攒了该回答</span>
              </div>
            </div>
            <div class="content-body-answer-content">
              <span v-html="workInfoComment.content">
             </span>
            </div>
            <div class="content-body-answer-footer">

              <div v-if="workInfoComment.isGiveUp == 0" class="content-body-answer-group">
                <button @click="giveUpInfo(workInfoComment)">点赞</button>
                <button>分享</button>
              </div>
              <div v-else class="content-body-answer-group">
                <button>已点赞</button>
                <button>分享</button>
              </div>

            </div>
          </div>
        </div>
        <div class="content-body-answer-side">
          <div class="board-head-Info">
            <span>招租广告位</span>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
  import HeaderComponent from "../../../components/HeaderComponent";
  import Editor from "../../../components/Editor";

    export default {
        name: "problemInfo",
        components: {
          HeaderComponent,
          Editor
        },
      data(){
          return {
            meAnswerInfo:{
              userName:this.$store.getters.getUserName,
              meAnswerContent:"",
              meAnswerUuid:"",
              answerModel:false
            },
            currentWorkInfoId:this.$route.query.uuid,
            workInfoExtend:{
              workInfo:{}
            },
            workInfoCommentInfo:{
              workInfoCommentInfoList:[
              ],
              pageSize:0,
              pageNum:0
            }
          }
      },
      created() {
        this.initWorkInfo();
        this.initWorkInfoComment();
      },
      methods:{
          initWorkInfo:function () {
            //得到当前任务信息uuid
             let uuid = this.$route.query.uuid;
             //请求任务详情信息
            this.$axios({
              method:"get",
              url:"/solvePlat/workInfo/getWorkInfo?uuid="+uuid
            })   .then(res => {
              if (res.data.success === true){
                this.workInfoExtend = res.data.data;
              } else{
                this.$message.error(this.data.msg)
              }
            }).catch(err => {
              console.log('err', err)
            })
          },
          initWorkInfoComment:function () {
            //得到当前任务信息uuid
            let uuid = this.$route.query.uuid;
            //请求任务详情信息
            this.$axios({
              method:"get",
              url:"/solvePlat/workInfoComment/selectWorkInfoComment?uuid="+uuid
            })   .then(res => {
              if (res.data.success === true){
                this.workInfoCommentInfo.workInfoCommentInfoList = res.data.data.list;
              } else{
                this.$message.error(this.data.msg)
              }
            }).catch(err => {
              console.log('err', err)
            })
          },
        followWorkInfo:function () {//关注当前话题
          this.$axios({
            mehtod:"get",
            url:"/solvePlat/userFollow/followWorkInfo?followresourcesid="+this.currentWorkInfoId
          }).then(res=>{
            if (res.data.success === true){

              this.workInfoExtend.isFollow = true;

              this.$message({
                message: res.data.msg,
                type: 'success'
              });

            } else{//更新失败
              this.$message.error({
                message: res.data.msg
              });
            }
          }).catch(error=>{
            console.log('err', err)
          })
        },
        cancleFollowWorkInfo:function () {//取消关注当前话题信息
          this.$axios({
            mehtod:"get",
            url:"/solvePlat/userFollow/cancleFollowWorkInfo?followresourcesid="+this.currentWorkInfoId
          }).then(res=>{
            if (res.data.success === true){

              this.workInfoExtend.isFollow = false;

              this.$message({
                message: res.data.msg,
                type: 'success'
              });

            } else{//更新失败

                this.$message.error({
                  message: res.data.msg
                });

            }
          }).catch(error=>{
            console.log('err', err)
          })
        },
        submitAnswer:function () {
          this.$axios({
            method: 'post',
            url:"/solvePlat/workInfoComment/saveWorkinfoComment",
            data:{
              workinfoid:this.currentWorkInfoId,
              content:this.meAnswerInfo.meAnswerContent,
              uuid:this.meAnswerInfo.meAnswerUuid
            }
          }).then(res=>{
            if (res.data.success === true){

              this.$message({
                message: res.data.msg,
                type: 'success'
              });

            } else{//更新失败
              this.$message.error({
                message: res.data.msg
              });
            }
          }).catch(error=>{
            console.log('err', error)
          })
        },
        showAnswerModel:function () {

            //如果有值了就是当前
            if (this.meAnswerInfo.meAnswerContent){
              return;
            }
          if (this.workInfoExtend.isMeAnswer) {//我已经回答了这个问题,动态加载这个评论信息
            this.$axios({
              method:"get",
              url:"/solvePlat/workInfoComment/getMeWorkInfoCommentInfo?workinfoid="+this.currentWorkInfoId,
            }).then(res=>{
              if (res.data.success === true){
                this.meAnswerInfo.meAnswerContent = res.data.data.content;
                this.meAnswerInfo.meAnswerUuid = res.data.data.uuid;
                this.meAnswerInfo.answerModel = true;
              } else{
                this.$message.error({
                  message: res.data.msg
                });
              }
            })
          }else{
            this.meAnswerInfo.answerModel = !this.meAnswerInfo.answerModel;
          }
        },
        changeEditorInputValue:function (result) {
          this.meAnswerInfo.meAnswerContent = result;
        },
        giveUpInfo:function (workInfoComment) {
          this.$axios({
            method:"post",
            url:"/solvePlat/commentGiveUpInfo/addCommentGiveUpInfo",
            data:{
              commentId:workInfoComment.uuid
            }
          }).then(res=>{

            if (res.data.success === true){
              this.$message({
                message: res.data.msg,
                type: 'success'
              });
              workInfoComment.isGiveUp = 1;

            } else{

              this.$message.error({
                message: res.data.msg
              });

            }
          })
        }
      }
    }
</script>

<style>
  #app {
    background-color: #f6f6f6;
  }
  .ql-editor{
    height:300px!important;
  }
  p img {
    max-width: 100%!important;
    display: block!important;
  }

</style>
<style scoped>



  .question-title{
    margin-top: 15px;
  }
  .question-title span{
    font-size: 20px;
    font-weight: 600;
  }
  .question-header{
    display: flex;
    width: 77%;
    margin: 0px auto;
    justify-content: space-between;
  }
  .question-tag{
    background-color: #e5f2ff;
    color: #0084ff;
    display: inline-block;
    margin-right: 10px;
    border-radius: 9px;
  }
  .question-tag a{
    font-size: 15px;
    font-weight: 300;
    margin: auto 10px;
  }
  .question-tags{
    display: flex;
    height: 30px;
    line-height: 30px;
  }
  .content-body{
    border-bottom: solid 1px #30121247;
    box-shadow: 0px 1px 1px #ac8e8e38;
    background-color: white;
    padding-top: 15px;
  }
  .question-footer{
    display: flex;
    justify-content: space-between;
    margin: 15px auto;
  }
  .question-button-group .writeAnswer{
    display: inline-block;
  }
  .question-button-group .follow{
    display: inline-block;
  }
  .question-button-action .comment{
    display: inline-block;
  }
  .question-button-action .report{
    display: inline-block;
  }
  .button-primary{
    background-color: #45343429;
    border: 1px solid #eee;
    padding: 4px 7px;
    border-radius: 4px;
    cursor: pointer;
  }
  .question-side{
    display: flex;
    margin-top: 42px;
  }
  .follow-user-look{
    margin-left: 25px;
  }
  .follow-user >span{
    font-size: 18px;
    font-weight: 600;
  }

  .follow-user-look > span{
    font-size: 18px;
    font-weight: 600;
  }
  .follow-user-num{
    font-size: 15px;
    font-weight: 600;
    color: #0084ff;
    text-align: center;
  }
  .follow-user-look-num{
    font-size: 15px;
    font-weight: 600;
    color: #0084ff;
    text-align: center;
  }

  .question-body{
    margin-top: 15px;
  }
  .question-body span{
    font-size: 16px;
    font-weight: 200;
  }
  .content-body-answer{
    display: flex;
    justify-content: space-between;
    width: 78%;
    margin: 15px auto;
  }
  .content-body-answer-items{
    flex-basis: 80%;
    min-height: 800px;
    background-color: white;
    padding: 15px;
    width: 50%;
  }

  .content-body-answer-item .user-name{
    font-size: 18px;
    font-weight: 600;
  }

  .content-body-answer-item .user-great-num{
    font-size: 12px;
    font-weight: 300;
    color: #0084ff;
    margin: 10px 10px;
  }
  .content-body-answer-content{
    font-size: 16px;
  }

  .content-body-answer-group{
    margin-top: 10px;
  }
  .content-body-answer-group button{
    background-color: #45343429;
    border: 1px solid #eee;
    padding: 4px 7px;
    border-radius: 4px;
    cursor: pointer;
  }

  .content-body-answer-item{
    border-bottom: solid 1px blue;
    padding-bottom: 21px;
    margin-top: 10px;
  }

  .editStyle{
    margin-bottom: 20px;
  }
  .edit-button-group{
    margin-top: 10px;
  }

  .edit-button-group-left{
    margin-left: auto;
  }

  .board-head-Info{
    background-color: white;
    height: 100px;
    line-height: 100px;
    text-align: center;
  }
  .content-body-answer-side{
    width: 10%;

  }
</style>
